<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>公益课堂</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__swiper.min.css">
    <link rel="stylesheet" type="text/css" href="__CSS__common.css"/>
    <link rel="stylesheet" href="https://img.ybl-group.com/mescroll/1.3.8/mescroll.min.css">
    <style>
        /*tab切换*/
        .tab-grid {
            width: 100%;
            height: 2.25rem;
            overflow-x: scroll;
            overflow-y: hidden;
            background-color: white;
            position: relative;
        }

        html body {
            padding-top: 0.5rem;
        }

        .course {
            position: relative;

        }

        .course:nth-child(2n+1) {
            width: calc(50% - 7px);
            float: left;
        }

        .course:nth-child(2n) {
            float: right;
            width: calc(50% - 7px);
        }

        .jie {
            font-size: 0.6rem;
            color: #fff;
            line-height: 1rem;
            width: 2.65rem;
            text-align: center;
            background-color: rgba(49, 49, 49, 0.4);
            position: absolute;
            left: 0;
            top: 0;
            border-top-left-radius: 0.25rem;
            border-bottom-right-radius: 0.25rem;
        }

        .course_img {
            display: inline-block;
            height: 5.5rem;
            width: 100%;
            border-radius: 0.25rem;
        }

        .course_title {
            font-size: 0.7rem;
            color: #333333;
            margin-bottom: 0.5rem;
        }

        .describe {
            font-size: 0.6rem;
            margin-bottom: 1rem;
            line-height: 0.7rem;
        }

        .course_type {
            color: #999;
        }

        .type_detail {
            color: #4FBF04;
            float: right;
        }

        .money {
            color: #FE0030;
            float: right;
        }

        /*控制滚动条*/

        .tab-grid::-webkit-scrollbar {
            height: 0;
        }

        .tab-row {
            width: 112%;
            height: 2rem;
            margin-left: 0.8rem;
            margin-right: 0.8rem;
            background-color: #fff;
        }

        .tab-item {
            float: left;
            height: 2.25rem;
            /*margin-right: 0.25rem;*/
            padding-left: 0.75rem;
            padding-right: 0.75rem;
            line-height: 2.25rem;
            text-align: center;
            font-size: 0.75rem;
            color: #333;
        }

        .list {
            height: 2rem;
        }

        .display-right-20 {
            position: relative;
            margin-right: 2.375rem;
        }

        .box > .display-right-20:last-child {
            margin-right: 0;
        }

        .choose1 {
            color: #F7B100;
            font-size: 0.75rem;
        }

        .tab-item-all {
            width: 10000%;
            padding-left: 0.15rem;
        }

        .item_active {
            font-weight: bold;
            color: #E73C5C;
            font-size: 0.75rem;
            background-size: 100% 2px;
            background-repeat: no-repeat;
            background-position: bottom;
            background-image: linear-gradient(to right, transparent 25%, #E73C5C 25%, #E73C5C 75%, transparent 75%, transparent 100%);
            background-image: -webkit-linear-gradient(to right, transparent 25%, #E73C5C 25%, #E73C5C 75%, transparent 75%, transparent 100%);
        }

        .tab-grid-right {
            width: 1.5rem;
            height: 2.4rem;
            position: fixed;
            right: 0;
            top: 25px;
            background-size: 30px 16px;
            background-repeat: no-repeat;
            background-position: right;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, white 55%, white 100%);
            background-image: -webkit-linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, white 55%, white 100%);
        }

        .aui-bar-nav .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.75rem;
            color: #E73C5C;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-bar-nav {
            background-color: #fff;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__left.png') no-repeat 0.5rem center;
            background-size: 22px 22px;
        }

        .aui-bar-nav .aui-title {
            font-size: 0.9rem;
            color: #333333;
            font-weight: bold;
        }

        .aui-icon-rightu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__search.png') no-repeat 0.6rem center;
            background-size: 22px 22px;
        }

        #header {
            background-color: #fff;
        }

        .multiple {
            display: flex;
            padding: 0 1rem;
            font-size: 0.75rem;
            color: #333333;
        }

        .aui-col-xs-3 {
            flex: 1;
            text-align: center;
            height: 2rem;
            line-height: 2rem;
        }

        .redd {
            color: #E73C5C;
            font-weight: bold;
        }

        .price {
            width: 8px;
            height: 14px;
            position: absolute;
            top: 4px;
            left: 0;
            padding-top: 0;
        }

        .shan {
            margin-left: 0.2rem;
            display: inline-block;
            width: 8px;
            height: 20px;
            vertical-align: text-bottom;
            position: relative;
        }

        html body {
            background-color: #F5F5F5;
            padding-bottom: 3.35rem;
        }

        .container {
            background-color: #fff;
            padding: 15px;

        }

        .container:after {
            comtent: "";
            clear: both;
        }

        .course {
            position: relative;
            float: left;
            /*background-color: pink;*/
        }

        .course:nth-child(2n+1) {
            margin-right: 13px;
        }

        .jie {
            font-size: 0.6rem;
            color: #fff;
            line-height: 1rem;
            width: 2.65rem;
            text-align: center;
            background-color: rgba(49, 49, 49, 0.4);
            position: absolute;
            left: 0;
            top: 0;
            border-top-left-radius: 0.25rem;
            border-bottom-right-radius: 0.25rem;
        }

        .course_img {
            display: inline-block;
            height: 5.5rem;
            width: 100%;
            border-radius: 0.25rem;
        }

        .course_title {
            font-size: 0.7rem;
            color: #333333;
            margin-bottom: 0.5rem;
        }

        .describe {
            font-size: 0.6rem;
            margin-bottom: 1rem;
            line-height: 0.7rem;
        }

        .course_type {
            color: #999;
            /*margin-bottom: 0.5rem;*/
        }

        .type_detail {
            color: #4FBF04;
            float: right;
        }

        .money {
            color: #FE0030;
            float: right;
        }

        .underNav {
            width: 100%;
            height: 2.4rem;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            background-color: #fff;
            align-items: center;
            padding-left: 1.2rem;
            padding-right: 1.2rem;
            border-top: 1px solid #F6F6F6;

        }

        .kuai {
            display: flex;
            flex-flow: column;
            align-items: center;
        }

        .kuai img {
            width: 1.25rem;
            height: 1.25rem;
        }

        .Navfont {
            width: 100%;
            font-size: 0.55rem;
            font-weight: 400;
            color: #CCCCCC;
            text-align: center;
        }

        .Navfont1 {
            width: 100%;
            font-size: 0.55rem;
            font-weight: 400;
            color: rgba(231, 60, 92, 1);
            text-align: center;
        }

        .dropload-refresh {
            display: none !important;
        }


        .seatImg {
            width: 110px;
            height: 110px;
        }

        .mescroll {
            position: fixed;
            top: 6.1rem;
            bottom: 0;
            height: auto;
            padding-bottom: 40px;
            z-index: 10;
            background: white;
        }
    </style>
</head>
<body>
<!--tab切换-->
<div style="width:100%;padding-top:25px;background-color:#FFFFFF;position:fixed;top:0;left:0;z-index:10000;" id="header"
     class="">
    <section class="tab-grid underLine" id='tab'>
        <!-- <div class="tab-grid-right"></div> -->
        <div class="tab-item-all" id="list">
            <div class="tab-item item_active" tapmode onclick="openFrame1(this)" data-id="-1">全部</div>
            {volist name='type' id='vo'}
            <div class="tab-item " tapmode onclick="openFrame1(this)" data-id="{$vo.classroom_id}">
                {$vo.classroom_name}
            </div>
            {/volist}
        </div>
    </section>
    <input type="hidden" name="classroomType" value="-1">
    <input type="hidden" name="order" value="1">
    <input type="hidden" name="orderP" value="1">
    <input type="hidden" name="user_id" value="{$user_id}">
    <div class="multiple aui-row">
        <div class="aui-col-xs-3 redd order" tapmode onclick="fnShai(this)" data-id="1">综合</div>
        <div class="aui-col-xs-3 order" tapmode onclick="fnShai(this)" data-id="2">最热</div>
        <div class="aui-col-xs-3 order" tapmode onclick="fnShai(this)" data-id="3">最新</div>
        {if $price_button==1}
        <div class="aui-col-xs-3 order" tapmode onclick="fnShai(this)" data-id="4">价格<span class="shan"><img
                class="price"
                src="__IMG__main3_priceup.png"
                alt=""></span></div>
        {/if}
    </div>
</div>

<div class="underNav">
    <div class="kuai" onclick="opennew(1);">
        <img src="__IMG__nav/nav11.png" alt="">
        <div class="Navfont">首页</div>
    </div>
    <div class="kuai" onclick="opennew(2);">
        <img src="__IMG__nav/nav22.png" alt="">
        <div class="Navfont">机构</div>
    </div>
    <div class="kuai" onclick="opennew(3);">
        <img src="__IMG__nav/nav3.png" alt="">
        <div class="Navfont1">公益课堂</div>
    </div>
    <div class="kuai" onclick="opennew(4);">
        <img src="__IMG__nav/nav44.png" alt="">
        <div class="Navfont">知识库</div>
    </div>
    <div class="kuai" onclick="opennew(5);">
        <img src="__IMG__nav/nav55.png" alt="">
        <div class="Navfont">我的</div>
    </div>
</div>

<div id="mescroll" class="mescroll">
    <div class="container">
        {volist name='lists' id='vo'}
        <div class="course" tapmode="active" data-id="{$vo.id}" onclick="fnDetails(this)">
            <div class="jie">共{$vo.num}节</div>
            <img src="{$vo.classroom_img?$vo.classroom_img:'__IMG__zhanweitu/classroom_zhanwei.png'}" alt="" class="course_img">
            <div class="aui-ellipsis-1 course_title">{$vo.classroom_title}</div>
            <div class="describe">
                {if $price_button==1}
                <span class="course_type">课程类型</span>
                {if $vo.classroom_cate==1}
                <span class="type_detail">免费</span>
                {/if}
                {if $vo.classroom_cate==2}
                <span class="money">{$vo.classroom_price}</span>
                {/if}
                {/if}
            </div>
        </div>
        {/volist}
    </div>
</div>
</body>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__doT.min.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript" src="__JS__aui-tab.js"></script>
<script type="text/javascript" src="__JS__aui-lazyload.js"></script>
<script type="text/javascript" src="__JS__common.js"></script>

<script src="https://img.ybl-group.com/mescroll/1.3.8/mescroll.min.js" charset="utf-8"></script>

<script type="text/javascript">
    // 导航栏跳转
    function opennew(index) {
        if (index == 1) {
            location.href = '{:url("First/index")}';
        } else if (index == 2) {
            location.href = '{:url("Mechanism/index")}';
        } else if (index == 3) {
            location.href = '{:url("Classroom/index")}';
        } else if (index == 4) {
            location.href = '{:url("Information/index")}';
        } else if (index == 5) {
            location.href = '{:url("My/index")}';
        }
    }
    var type_id;//筛选
    var order_type = 1;//排序
    var page = 1;
    // 切换栏目
    function openFrame1(el) {
        var tab_item_all = $api.domAll('.tab-item');
        for (var k = 0; k < tab_item_all.length; k++) {
            $api.removeCls(tab_item_all[k], 'item_active');
        }
        event.target.className = 'tab-item item_active';
        if (type_id == $api.attr(el, 'data-id')) {
            return
        }
        type_id = $api.attr(el, 'data-id');
        var shai_all = $api.domAll('.aui-col-xs-3');
        for (var l = 0; l < shai_all.length; l++) {
            $api.removeCls(shai_all[l], 'redd');
        }
        $api.attr(shai_all[0], 'class', 'aui-col-xs-3 redd');
        order_type = 1;
        page = 1;
        console.log("第一栏")
        mescroll.triggerDownScroll();
        mescroll.scrollTo( 0 ,0);
    }

    // 筛选
    function fnShai(el) {
        var shai_all = $api.domAll('.aui-col-xs-3');
        for (var l = 0; l < shai_all.length; l++) {
            $api.removeCls(shai_all[l], 'redd');
        }
        $api.attr(el, 'class', 'aui-col-xs-3 redd');
        if (el.innerHTML.substring(0, 2) == '价格') {
            if ($api.attr($api.dom('.price'), 'src') == '__IMG__main3_priceup.png') {
                $api.attr($api.dom('.price'), 'src', '__IMG__main3_pricedown.png')
            } else {
                $api.attr($api.dom('.price'), 'src', '__IMG__main3_priceup.png')
            }
        }
        //排序
        var order = $api.attr(el, 'data-id');
        //获取分类的ID
//        var type_id = $('input[name="classroomType"]').val();
        //价格排序状态  默认价格升序
        var orderP = 1;
        if (order == order_type) {
            if ($('input[name="orderP"]').val() == orderP) {
                orderP = 2;
                $('input[name="orderP"]').val(orderP);
            } else {
                orderP = 1;
                $('input[name="orderP"]').val(orderP);
            }
        }
        order_type = order;
        page = 1;
        console.log("切换第二栏")
        mescroll.triggerDownScroll();
        mescroll.scrollTo( 0 ,0);

    }

    //详情
    function fnDetails(el) {
        id = $api.attr(el, 'data-id');
        user_id = $('input[name="user_id"]').val();
        location.href = 'http://share.verynurse.com/share/html/main3/classroomdetail.html?id11=' + id + "&user=" + user_id;
    }

    /**
     * 上拉加载，下拉刷新
     */
    var mescroll = new MeScroll("mescroll", {
        up: {
            auto:false,
            callback: function () {
                page++
                var classroomType = type_id;
                var order = order_type;
                var orderP = $('input[name="orderP"]').val();
                $.ajax({
                    url: '{:url("Classroom/ajaxIndexE")}',
                    data: {page: page, classroomType: classroomType, order: order, orderP: orderP},//
                    type: 'POST',
                    dataType: 'JSON',
                    success: function (data) {
                        var _html = '';
                        var arrLen = data.msg.length;
                        if (arrLen <= 0) {
                            mescroll.endSuccess(arrLen, false);
                        } else {

                            var datas = data.msg;
                            $.each(datas, function (key, v) {
                                _html += '<div class="course" tapmode="active" data-id="' + v.id + '" onclick="fnDetails(this)">';
                                _html += '<div class="jie">共' + v.num + '节</div>';
                                if(v.classroom_img == ''){
                                    _html += '<img src="__IMG__zhanweitu/classroom_zhanwei.png" alt="" class="course_img">';
                                }else{
                                    _html += '<img src="' + v.classroom_img + '" alt="" class="course_img">';
                                }
                                _html += '<div class="aui-ellipsis-1 course_title">' + v.classroom_title + '</div>';
                                _html += '<div class="describe">';
                                if (data.price_button == 1) {
                                    _html += '<span class="course_type">课程类型</span>';
                                    if (v.classroom_cate == 1) {
                                        _html += '<span class="type_detail">免费</span>';
                                    }
                                    if (v.classroom_cate == 2) {
                                        _html += '<span class="money">' + v.classroom_price + '</span>';
                                    }
                                }
                                _html += '</div></div>';

                            });
                            $(".container").append(_html);
                        }

                        mescroll.endSuccess(arrLen, true);

                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        mescroll.endErr();

                    }
                });
            },
            htmlNodata:"",
            offset:300
        },
        down: {
            auto:false,
            callback: function () {
                console.log(mescroll.optUp);
                console.log("下拉");
                var classroomType = type_id;
                var order = order_type
                var orderP = $('input[name="orderP"]').val();
                page = 1;
                $.ajax({
                    url: '{:url("Classroom/ajaxIndexE")}',
                    data: {page: page, classroomType: classroomType, order: order, orderP: orderP},
                    type: 'POST',
                    dataType: 'json',
                    success: function (data) {
                        var _html = '';
                        $('.upOrDown_data').empty();//
                        var datas = data.msg;
                        if (datas.length <= 0) {
                            _html = '<div class="seat" id="seatAll"><img src="__IMG__quesheng/no_content.png" class="seatImg"/> <div class="seatName">暂无记录</div></div>';
                            $(".container").html(_html);
                            mescroll.endSuccess();
                        } else {
                            $.each(datas, function (key, v) {
                                _html += '<div class="course" tapmode="active" data-id="' + v.id + '" onclick="fnDetails(this)">';
                                _html += '<div class="jie">共' + v.num + '节</div>';
                                if(v.classroom_img == ''){
                                    _html += '<img src="__IMG__zhanweitu/classroom_zhanwei.png" alt="" class="course_img">';
                                }else{
                                    _html += '<img src="' + v.classroom_img + '" alt="" class="course_img">';
                                }
                                _html += '<div class="aui-ellipsis-1 course_title">' + v.classroom_title + '</div>';
                                _html += '<div class="describe">';
                                if (data.price_button == 1) {
                                    _html += '<span class="course_type">课程类型</span>';
                                    if (v.classroom_cate == 1) {
                                        _html += '<span class="type_detail">免费</span>';
                                    }
                                    if (v.classroom_cate == 2) {
                                        _html += '<span class="money">' + v.classroom_price + '</span>';
                                    }
                                }
                                _html += '</div></div>';

                            });
                            $(".container").html(_html);
                        }
                        mescroll.endSuccess(datas.length,true);

                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        mescroll.endErr();
                    }
                });
            }
        },
        htmlNodata: ''
    });

</script>

</html>
